<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/elektron/dist/elektron.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/onoffcanvas/dist/onoffcanvas.min.css">

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main" style="height: 100vh;">
        <div class="container elk-app elk-wrap diffs elk-container">
            <aside class="elk-side bg-light left-list" id="elk-side">
                <div class="elk-side-content">
                    <div class="elk-side-nav">
                        <ul class="nav flex-column" id="menu1"></ul>
                    </div>
                </div>

            </aside>
            <div class="elk-main">
                <div class="wrapper">
                    <textarea id="code" name="code">  你还没有选择脚本文件！</textarea>
                </div>
            </div>
        </div>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
  <script src="https://cdn.jsdelivr.net/npm/onoffcanvas"></script>
  <script src="https://cdn.jsdelivr.net/npm/elektron"></script>
  <script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
  <script src="./js/javascript.js"></script>

  <script type="text/javascript">
     $.ajaxSetup({ cache: false });

var qrcode, userCookie;
$(document).ready(function () {
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        lineWrapping: false,
        styleActiveLine: true,
        matchBrackets: true,
        readOnly: true,
        mode: 'javascript',
        theme: 'dracula'
    });
    
    $.get('./api/scripts', function (data) {
        var dirs = data.dirs;
        var navHtml = "";
        for (let index in dirs) {
            var dirName = dirs[index].dirName;
            // 文件在scripts/目录时
            if (dirName === '@') {
                var row = `<li class="nav-item">`;
                for (let filesKey in dirs[index].files) {
                    var fileName = dirs[index].files[filesKey];
                    row += `<a class="nav-link" href="javascript:viewScript('${dirName}', '${fileName}');">${fileName}</a>`
                }
                    row += `</li>`;
            } else {
                var row = `<li class="nav-item">
                        <a class="nav-link text-dark has-arrow" href="#">${dirName}</a>
                        <ul class="nav flex-column pl-1">
                            <li class="nav-item">`;
                for (let filesKey in dirs[index].files) {
                    var fileName = dirs[index].files[filesKey];
                    row += `<a class="nav-link" href="javascript:viewScript('${dirName}', '${fileName}');">${fileName}</a>`
                }
                    row += `</li>
                            </ul>
                        </li>`;
                }
            
            navHtml += row;
        }
        $('#menu1').html(navHtml);
        $('#menu1').metisMenu();
    });

    window.viewScript = function viewScript(dir, file) {
        if (window.innerWidth < 993) {
            dispatch(document.getElementById('toggleIcon'), 'click');
        }

        $.get(`./api/scripts/${dir}/${file}`, function (data) {
            editor.setValue(data);
        });
    }

    $('#wrap').click(function () {
        var lineWrapping = editor.getOption('lineWrapping');
        editor.setOption('lineWrapping', !lineWrapping);
    });


    //自动触发事件
    function dispatch(ele, type){
        try{
            if(ele.dispatchEvent){  //标准浏览器

                var evt = document.createEvent('Event');
                    evt.initEvent(type,true,true);
                    ele.dispatchEvent(evt);
            }else{
                ele.fireEvent('on' + type);
            }
        }catch(e){};
            
    }
});
    layui.use(["layer"], function () {
      var $ = layui.jquery,
        layer = layui.layer;
    });
  </script>
  